<@override name="contest_content">
  <#assign type="Private<sup>${contest.type}</sup>">
  <#if contest.type==0>
    <#assign type="Public">
  </#if>
<h3 class="text-center">${type} Contest ${contest.cid!}: ${contest.title!}</h3>
<div class="row text-center">
  <div class="span6 offset3">
    <div class="well">
      <span>Start time</span>: <span class="time">${contest.startDateTime!}</span>
      <span>End time</span>: <span class="time">${contest.endDateTime!}</span><br>
      <span>Current System Time</span>: <span class="time" id="current">${contest.startDateTime!}</span>
      <span>Contest Status</span>: <span class="status ${status!}">${status!}</span>
    </div>
  </div>
</div>
<div class="row text-center">
  <div class="span4 offset4">
    <p>${contest.description!}</p>
  </div>
</div>

<div class="row">
  <div class="span10 offset1">
    <table id="user-list" class="table table-hover table-condensed">
      <thead>
      <tr>
        <th width="5%">UID</th>
        <th width="25%">User</th>
        <th width="25%">Team Name</th>
        <th width="20%">Special Team</th>
        <th width="25%">Action</th>
      </tr>
      </thead>
      <tbody>
        <#if contestUsers??>
          <#list contestUsers as User>
          <tr class="user" uid="${User.uid!}">
            <td class="pid">
              <a href="user/profile/${User.name!}" title="${User.realName!}">${User.uid!}</a>
            </td>
            <td class="name"><a href="user/profile/${User.name!}">${User.name!}</a></td>
            <td class="nick">
              <input type="text" class="input-large" value="${User.nick!}" placeholder="Team Name" required>
            </td>
            <td>
              <i data-uid="${User.uid!}" data-special="${User.special?c}"
                 class="special btn <#if User.special>btn-success<#else>btn-info</#if>">
                <#if User.special>Yes<#else>No</#if>
              </i>
            </td>
            <td class="admin">
              <i class="btn btn-success update" uid="${User.uid!}">Update</i>
              <#if serverTime<contest.endTime>
                <i class="btn btn-danger remove" uid="${User.uid!}">Remove</i>
              </#if>
            </td>
          </tr>
          </#list>
        </#if>
      </tbody>
      <#if serverTime<contest.endTime>
        <tfoot>
        <tr>
          <form class="form-inline" id="addUser" action="/api/contest/addUser" method="post">
            <input type="hidden" name="cid" value="${contest.cid!}"><span class="id"></span>
            <td id="user" data-nick=""><input type="number" name="uid" class="input-small" placeholder="User ID"
                                              min="1000" required></td>
            <td><input type="text" name="name" class="input-large" placeholder="User Name" required></td>
            <td id="nick"></td>
            <td></td>
            <td>
              <button type="submit" class="btn btn-success">Add</button>
            </td>
          </form>
        </tr>
        </tfoot>
      </#if>
    </table>
  </div>
</div>

</@override>

<@override name="styles">
<link rel="stylesheet" href="assets/jquery.artDialog/skins/twitter.css" type="text/css">
</@override>
<@override name="scripts">
<link href="assets/tablecloth/css/tablecloth.css" rel="stylesheet" type="text/css">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

<script src="assets/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="assets/jquery.artDialog/jquery.artDialog.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    clock(function (current_time) {
      $("#current").html(new Date(current_time).format("yyyy-MM-dd hh:mm:ss"));
    }, 1000);

    function getUserName() {
      var uid = this.value;
      if (uid >= 1000) {
        $.get("/api/user/getUserBasic", {uid: this.value},
                function (data) {
                  if (data) {
                    $("input[name='name']").val(data.name);
                    $('td#user').data('nick', data.nick);
                    $('td#nick').html(data.nick);
                  } else {
                    $("input[name='uid']").val('');
                    $('td#user').data('nick', '');
                    $('td#nick').html('');
                  }
                });
      }
      else {
        $("input[name='name']").val('');
      }
    }

    $('#user-list').delegate('.special', 'click', function () {
      var cid = ${contest.cid!0};
      var uid = $(this).data("uid");
      var special = $(this).data("special");
      var that = $(this);
      $.post('/api/contest/setSpecial', {'cid': cid, 'uid': uid, 'special': !special}, function (data) {
        if (data && data.special != special) {
          that.data("special", data.special);
          that.removeClass("btn-success btn-info");
          that.addClass(data.special ? "btn-success" : "btn-info");
          that.html(data.special ? "Yes" : "No");
        }
      })
    });

    $("input[name='uid']").change(getUserName).keyup(getUserName);
    $("input[name='name']").keyup(function () {
      var name = this.value;
      if (name.length >= 2) {  // for old user name, e.g: 'test'
        $.get("/api/user/getUserBasic", {name: this.value},
                function (data) {
                  if (data) {
                    $("input[name='uid']").val(data.uid);
                    $('td#user').data('nick', data.nick);
                    $('td#nick').html(data.nick);
                  } else {
                    $("input[name='uid']").val('');
                    $('td#user').data('nick', '');
                    $('td#nick').html('');
                  }
                });
      }
      else {
        $("input[name='uid']").val('');
      }
    });

    <#if oj_style != "slate">
      $("#user-list").tablecloth({
        theme: "stats",
        condensed: true,
        sortable: false,
        striped: true,
        clean: true
      });
    </#if>

    $(function () {
      $('#addUser').submit(function () {
        var that = $(this);
        var cid = $('input[name=cid]').val();
        var uid = $('input[name=uid]').val();
        var name = $('input[name=name]').val();
        var nick = $('td#user').data('nick');
        $.post($(this).attr("action"), $('#addUser').serialize(),
                function (data) {
                  switch (data.result) {
                    case 0:
                      var html = '<tr class="user" uid="' + uid + '">' +
                              '<td class="uid"><a href="user/profile/' + name + '">' + uid + '</a></td>' +
                              '<td class="name"><a href="user/profile/' + name + '">' + name + '</a></td>' +
                              '<td class="nick"><input type="text" name="team" class="input-large" value="'
                              + (nick ? nick : '') + '" placeholder="Team Name" required></td>' +
                              '<td><i data-uid="' + uid + '" data-special="false" class="special btn btn-info">No</i></td>' +
                              '<td class="admin">' +
                              '<i class="btn btn-success update" uid="' + uid + '">Update</i>' +
                                <#if serverTime<contest.startTime>
                                '<button class="btn btn-danger remove" uid="' + uid + '">Remove</button>' +
                                </#if>
                              '</td></tr>';
                      $('#user-list tbody').append(html);
                      break;
                    case 1:
                      $.dialog({
                        content: 'Db error.',
                        time: 1.5
                      });
                      break;
                    case 2:
                      $.dialog({
                        content: 'Duplicate user for this contest.',
                        time: 1.5
                      });
                      break;
                    case 3:
                      $.dialog({
                        content: 'This user does not exist.',
                        time: 1.5
                      });
                      break;
                    case 4:
                      $.dialog({
                        content: 'Contest already finished.',
                        time: 1.5
                      });
                      break;
                  }
                });
        return false;
      });
      $('table').on('click', '.update', function () {
        var that = $(this);
        var nick = that.parent().parent().children('.nick').children().val();
        $.post('/api/contest/updateUser', {'cid':${contest.cid!}, 'uid': that.attr('uid'), 'nick': nick}, function (data) {
          if (data.result) {
            $.dialog({
              content: 'User updated.',
              time: 1
            });
          } else {
            $.dialog({
              content: "DB error!",
              time: 1.5
            });
          }
        });
      });
      $('table').on('click', '.remove', function () {
        var that = $(this);
        $.dialog({
          title: 'Remove user from contest',
          content: 'Are you sure?',
          cancelVal: 'Cancel',
          cancel: true,
          okVal: 'Remove',
          ok: function () {
            $.post('/api/contest/removeUser', {cid:${contest.cid!}, uid: that.attr('uid')}, function (data) {
              switch (data.result) {
                case 0:
                  $.dialog({
                    content: "DB error!",
                    time: 1.5
                  });
                  break;
                case 1:
                  that.parent().parent().remove();
                  $.dialog({
                    content: 'User removed.',
                    time: 1
                  });
                  break;
                case 2:
                  $.dialog({
                    content: "User already has submission!",
                    time: 1.5
                  });
                  break;
              }
            });
            this.close();
            return false;
          }
        });
      });
    });
  });
</script>
</@override>
<@extends name="_layout.html" />
